<template>
  <div class="left-tabs-item-box">
    <div class="phoneWarp">
      <div class="phoneBox">
        <div class="phone">
          <div class="wxTitle" style="text-align:center;">
            <span style="font-size:16px;">有奖答题活动</span>
          </div>
          <div class="bgBody" :style="bgStyle" @mouseenter="editBgButtonVisible = true" @mouseleave="editBgButtonVisible = false">
            <span v-if="editBgButtonVisible" class="edit-bg-button" @click="editBgDialogShow = true">编辑背景</span>
            <slot />
          </div>
          <slot name="phone" />
        </div>
      </div>
    </div>

    <editBgDialog ref="editBgDialogRef" :show.sync="editBgDialogShow" :setting="appSetting[tabsName]" @change="onChange" />
  </div>
</template>

<script>
import editBgDialog from './editBgDialog.vue'
import { mapState } from 'vuex'

export default {
  name: 'LeftTasksItem',
  components: {
    editBgDialog
  },
  props: {
    tabsName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editBgButtonVisible: false,
      editBgDialogShow: false,
      bgImg: '',
      bgBodyStyle: {
        backgroundColor: '#fff',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 100%',
        backgroundImage: ''
      }
    }
  },
  computed: {
    ...mapState({
      appSetting: state => state.task.appSetting
    }),
    bgStyle: function() {
      if (this.tabsName && this.appSetting && this.appSetting[this.tabsName] && this.appSetting[this.tabsName].bgStyle) {
        return this.appSetting[this.tabsName].bgStyle
      } else {
        return this.bgBodyStyle
      }
    }
  },
  methods: {
    onChange(imageUrl) {
      console.log(imageUrl)
      // 重置一次背景图片

      // this.bgBodyStyle.backgroundImage = ''
      // this.bgBodyStyle.backgroundImage = `url(${imageUrl})`

      const appSetting = this.appSetting
      appSetting[this.tabsName].bgImg = imageUrl
      if (!appSetting[this.tabsName].bgStyle) {
        appSetting[this.tabsName].bgStyle = {}
      }
      appSetting[this.tabsName].bgStyle.backgroundImage = `url(${imageUrl})`
      this.$store.commit('changeTaskAppSetting', appSetting)
    }
  }
}

</script>

<style scoped lang="scss">
.left-tabs-item-box{
  .phoneWarp {
    min-width: 400px;
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;

    .phoneBox {
      height: 754px;
      /* width: 495px; */
      z-index: 100;
      margin: 60px auto;
      position: relative;

      .phone {
        width: 375px;
        height: 754px;
        background: #e9e7e7;
        /* float: left; */
        box-shadow: 0 0 6px rgba(0, 0, 0, .1);
        margin: auto;
        display: flex;
        flex-direction: column;
        position: relative;

        .wxTitle {
          height: 64px;
          width: 375px;
          position: relative;
          background: url('../../assets/images/wxTitle.png') no-repeat;

          span {
            position: absolute;
            top: 80%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #050404;
          }
        }

        .bgBody {
          flex: 1;
          overflow-y: hidden;
          border: 0px solid red;
          position: relative;
          background-image: url('../../assets/images/gameBg.jpg');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          scrollbar-width:none;
          -ms-overflow-style:none;
          ::-webkit-scrollbar{display:none}

          .edit-bg-button {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            height: 25px;
            line-height: 25px;
            background-color: black;
            color: #fff;
            font-size: 12px;
            padding: 0px 10px;
            cursor: pointer;
            z-index: 10;
          }
        }
      }
    }
  }
}
</style>

